{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="shortcut icon" href="{% static '' %}velonic/img/favicon_1.ico">

        <title>FAQ 文章列表{% if category %}{{ category.name }}{% endif %}</title>

        <!-- Bootstrap core CSS -->
        <link href="{% static '' %}velonic/css/bootstrap.min.css" rel="stylesheet">
        <link href="{% static '' %}velonic/css/bootstrap-reset.css" rel="stylesheet">

        <!--Animation css-->
        <link href="{% static '' %}velonic/css/animate.css" rel="stylesheet">

        <!--Icon-fonts css-->
        <link href="{% static '' %}velonic/css/font-awesome.css" rel="stylesheet" />
        <link href="{% static '' %}velonic/css/ionicons.min.css" rel="stylesheet" />
        <link href="{% static '' %}velonic/css/material-design-iconic-font.min.css" rel="stylesheet" />

        <!-- Custom styles for this template -->
        <link href="{% static '' %}velonic/css/style.css" rel="stylesheet">
        <link href="{% static '' %}velonic/css/helper.css" rel="stylesheet">
        

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
        <!--[if lt IE 9]>
          <script src="{% static '' %}velonic/js/html5shiv.js"></script>
          <script src="{% static '' %}velonic/js/respond.min.js"></script>
        <![endif]-->


    </head>


    <body>

        <!-- Aside Start-->
        {% include 'velonic/block/side_nav.html' %}
        <!-- Aside Ends-->


        <!--Main Content Start -->
        <section class="content">
            
            <!-- Header -->
            {% include 'velonic/block/header.html' %}
            <!-- Header Ends -->


            <!-- Page Content Start -->
            <!-- ================== -->

            <div class="wraper container-fluid">
                {{ cid }}
                  
                <div class="row">
                    
                    <!-- Left sidebar -->
                    <div class="col-md-2">
                         <a href="{% url 'articleList' %}" class="btn btn-primary btn-block">FAQ</a>

                        <div class=" m-t-20 p-0">
                            <div class="list-group no-border mail-list">
                                {% for cate in category_list %}
                                    <a href="{% url 'articleList' %}?c={{ cate.id }}" class="list-group-item {% if c %}{% ifequal c cate.id %}active{% endifequal %}{% endif %}"><span class="fa fa-circle {% cycle 'text-info' 'text-warning' 'text-purple' 'text-pink' 'text-success' %} pull-right"></span>{{ cate.name }}({{ cate.article_set.all.count }})</a>
                                {% endfor %}
                            </div>
                        </div>
                        
                    </div>
                    <!-- End Left sidebar -->
                    

                    <!-- Right Sidebar -->
                    <div class="col-md-10">

                        <div class="panel panel-default">
                            <div class="panel-body">
                            
                                <table class="table table-hover mails">
                                    <tbody>
                                        <tr>
                                            {% for article in article_list %}
                                            <td class="mail-select">
                                                <label class="cr-styled">
                                                    <input type="checkbox"><i class="fa"></i>
                                                </label>
                                            </td>
                                            <td class="mail-rateing">
                                                <i class="fa fa-star"></i>
                                            </td>
                                            <td>
                                                <a href="{% url 'article' article.id %}">{{ article.category }}</a>
                                            </td>
                                            <td>
                                                <a href="{% url 'article' article.id %}"><i class="fa fa-circle text-info m-r-15"></i>{{ article.title }}</a>
                                            </td>
                                            <td>
                                                <i class="fa fa-paperclip"></i>
                                            </td>
                                            <td class="text-right">
                                                {{ article.pub_date }}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    
                                    </tbody>
                                </table>
                                
                                <hr>

                                <div class="row">
                            <ul class="pagination">
              {% if article_list.has_previous %}
            <li>
              <a href="{% if c %}?c={{ c }}&{% else %}?{% endif %}page={{ article_list.previous_page_number }}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
                  {% else %}
                  <li class="disabled">
              <a href="#" aria-label="Previous">
                <span aria-hidden="false">&laquo;</span>
              </a>
            </li>
              {% endif %}
          {% for p in article_list.paginator.page_range %}
          {% ifequal p article_list.number %}
            <li class="active"><a href="#">{{ p }}</a></li>
              {% else %}
              <li><a href="{% if c %}?c={{ c }}&{% else %}?{% endif %}page={{ p }}">{{ p }}</a></li>
          {% endifequal %}
        {% endfor %}
          {% if article_list.has_next %}
            <li>
              <a href="{% if c %}?c={{ c }}&{% else %}?{% endif %}page={{ article_list.next_page_number }}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          {% else %}
              <li class="disabled">
              <a href="#" aria-label="Next">
                <span aria-hidden="false">&raquo;</span>
              </a>
            </li>
          {% endif %}
          </ul>
                                </div>


                            
                            </div> <!-- panel body -->
                        </div> <!-- panel -->
                    </div> <!-- end Col-9 -->
                
                </div><!-- End row -->


            </div> <!-- END Wraper -->

            <!-- Footer Start -->
            {% include 'velonic/block/footer.html' %}
            <!-- Footer Ends -->


        </section>
        


        <!-- js placed at the end of the document so the pages load faster -->
        <script src="{% static '' %}velonic/js/jquery.js"></script>
        <script src="{% static '' %}velonic/js/bootstrap.min.js"></script>
        <script src="{% static '' %}velonic/js/pace.min.js"></script>
        <script src="{% static '' %}velonic/js/wow.min.js"></script>
        <script src="{% static '' %}velonic/js/jquery.nicescroll.js" type="text/javascript"></script>

        <script src="{% static '' %}velonic/js/jquery.app.js"></script>


    {% include 'velonic/block/footer_comm.html' %}


    </body>
</html>
